<include file="../header" />
<body>
	<div class="wraper">
		<div class="load">
			<img class="load-bee" src="/assets/repairnew/images/load-bee.png"/>
		</div>
	    <div class="top">
	        <p class="clearfix">
	        	<a href="/Repairnew/RepairnewUserOrder/userOrderList/repairId/{BEESCRM:$repairId}" class="iconfont icon-zuo fl-left"></a>
	        	<span class="fl-left">我要报修</span>
	        	<a href="/Repairnew/RepairnewUserOrder/userOrderList/repairId/{BEESCRM:$repairId}" class="iconfont icon-shouye text-right fl-right"></a>
	        </p>
	    </div>
	   <div class="upload-img clearfix">
		   <div class="imgbox fl-left"><img src="{BEESCRM:$data['img']['url']}" id="picture" style="width:100px;height:100px;"/></div>
		   <input type="hidden" id="picture_path" value="{BEESCRM:$data['img']['url']}" >
           <div class="add-img fl-left" >
			   <input class="file-input" type="file" name="upload-file" id="fileupload_input" />
			   <!--accept="image/*" capture="camera"-->
			   <span class="iconfont icon-tianjia tianjia"></span>
		   </div>
    	</div>
    <div>
        <p class="form-box">
            <textarea class="textarea" placeholder="请详细描述需维修的位置及情况，例如：淋浴头底下靠近地面的那个水龙头一直在滴水" id="content">{BEESCRM:$data.content}</textarea>
        </p>
		<p class="form-box">
			<select class="select" id="community_type">
				<option value="0">请选择区域</option>
				<option value="1">生活区</option>
				<option value="2">教学区</option>
			</select>
			<span class="triangle"></span>
		</p>
        <p class="form-box">
            <select class="select" id="project_id">
            	<option value="0">请选择报修一级项目</option>
            	<volist name="projectList" id="vo">
            		<option value="{BEESCRM:$vo.project_id}" <if condition="$data['project_id'] eq $vo['project_id']">selected="selected"</if>>
            			{BEESCRM:$vo['project_name']}
            		</option>
            	</volist>
            </select>
            <span class="triangle"></span>
        </p>
        <p class="form-box" id="child_project" style="display: none;">
            <select class="select" id="project_child_id" >
            </select>
            <span class="triangle"></span>
        </p>
    </div>
    <div class="message clearfix" style="margin-bottom: 12px;">
		<if condition="empty($addressInfo)">
			<p class="title">报修地址</p>
		</if>
        <div class="clearfix" style="position: relative">
            <p class="mes fl-left" data-address_id="{BEESCRM:$addressInfo['address_id']}" id="address"><span id="community_name" data-community_id="{BEESCRM:$addressInfo['community_id']}">{BEESCRM:$addressInfo['community_name']}</span> <span id="building_name" data-building_id="{BEESCRM:$addressInfo['building_id']}">{BEESCRM:$addressInfo['building_name']}</span> <span id="room_name">{BEESCRM:$addressInfo['room_name']}</span>
				<span id="address_detail">{BEESCRM:$addressInfo['address_detail']}</span>
            	<br/>
            	<span id="real_name">{BEESCRM:$addressInfo['real_name']}</span>  <span id="mobile">{BEESCRM:$addressInfo['mobile']}</span>
            </p>
			<if condition="$addressInfo">
				<a href="/Repairnew/RepairnewAddress/addressList/repairId/{BEESCRM:$repairId}" class="btn-change fl-right">更换地址</a>
			<else/>
				<a href="/Repairnew/RepairnewAddress/addAddress/repairId/{BEESCRM:$repairId}" class="btn-change fl-right">添加地址</a>
			</if>
        </div>
    </div>

		<if condition="$repair.tips neq ''">
			<div class="message clearfix">
				{BEESCRM:$repair.tips}
			</div>

		</if>
    <ul class="btn-box">
    	<input type="hidden" id="address_id" value="{BEESCRM:$data['address_id']}">
    	<input type="hidden" id="order_id" value="{BEESCRM:$data['order_id']}">
    	<input type="hidden" id="cost" value="0">
        <a href="javascript:void(0)" class="btn half addorder" >提交</a>
        <a href="javascript:history.back(-1)" class="btn half js_cancel" >取消</a>
    </ul>
</div>

	<input type="hidden" name="imageNeed" id="imageNeed" value="{BEESCRM:$repairInfo['image_condition']}">
	<input type="hidden" name="accountId" id="accountId" value="{BEESCRM:$accountId}">

<include file="../commonJS" />
<script type="text/javascript" src="/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/image.compress.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    var accountId=$('#accountId').val();

		var timeOut="{BEESCRM:$timeOut}";

        if (accountId !=65) {

            if (timeOut == 1) {
                $.confirm('亲爱的同学，您好！我们的维修师傅已经下班，您所提交的维修订单我们将在第二天为您受理及维修。如果遇到紧急情况，影响到同学们生活的，请拔打晚间报修电话：15168489428，我们将在第一时间为您服务，谢谢配合！');
            }

        }

		//将sessionStorage的内容渲染页面
		getSessionStorage();

		//图片上传
//		$("#fileupload_input").fileupload({
//			url:"/Base/Common/upload",//文件上传地址，当然也可以直接写在input的data-url属性内
//			beforeSend:function(){
//				$('.load').show();
//			},
//			done:function(e,result){
//				//done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
//				//注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
//				//返回的数据在result.result中，假设我们服务器返回了一个json对象
//				var data=$.parseJSON(result.result);
//				if(data.status=='S'){
//					$('#picture').attr('src',data.url);
//					setTimeout($('.load').hide(),3000);
//				}else{
//					$.alert('error',data.message);
//					setTimeout($('.load').hide(),3000);
//					return false;
//				}
//			}
//		});

        // 图片上传
        var ImageCompress = new ImageCompressClass({
            fileSelector:"#fileupload_input",  //fileInput选择器
            previewSelector:"#picture",        //预览图片选择器
            getErrorMessage:function(message) {
              if (message) {
                  $.alert('error',message);return false;
              }
            },
            ajaxInterace:function(image_content){
                var data = {};
                data.image_content = image_content;

                $.ajax({
                    url:"/Repairnew/RepairnewUserOrder/uploadImage/repairId/{BEESCRM:$repairId}",
                    type:'POST',
                    data: {"image_content":image_content},
                    dataType:'JSON',
                    success:function(res){
                        if (res.status == 'S') {
                            //$.alert('success',res.message);
                            $('#picture_path').val(res.img_url);
                            $('#picture').attr('src',res.img_url);//alert($('#picture').attr('src'));
                        }
                        else {
                            $.alert('error',res.message);
                        }
                    }
                });
            }
        });


		//选择了园区类型后，获取关联的一级项目
		$(document).on("change","#community_type",function () {
			var community_type = $('#community_type').val();
			var _html = '<option value="0">请选择报修一级项目</option>';
			$.ajax({
				url : "/Repairnew/RepairnewUserOrder/ajaxGetProjectList/repairId/{BEESCRM:$repairId}",
				type : 'POST',
				data : {'community_type' : community_type},
				dataType : 'JSON',
				beforeSend : function () {
					$('.scrm-loadding').show();
				},
				success : function (data) {
					$('.scrm-loadding').hide();
					if(data.status == 'S'){
						for(var i=0;i<data.data.length;i++){
							_html += '<option value="' + data.data[i].project_id + '">' + data.data[i].project_name +'</option>';
						}
						$("#project_id").html(_html);
					}else{
						$.alert('error',data.message);
					}
				},
				error : function () {
					$.alert('error','网络错误，请求失败');
				}
			});
		});

		//获取二级项目列表
		$("#project_id").change(function () {
			var project_id = $(this).val();
			if(project_id == 0){	//选中请选择，不做任何操作
				$('#project_child_id').html('<option value="0">请选择报修二级项目</option>');
				$('#child_project').hide();
				return false;
			}

			var _html = '<option value="0">请选择报修二级项目</option>';
			$.ajax({
				url : '/Repairnew/RepairnewUserOrder/ajaxChildProjectList/repairId/{BEESCRM:$repairId}',
				type : 'POST',
				data : {'project_id' : project_id},
				dataType : 'JSON',
				beforeSend : function () {
					$('.scrm-loadding').show();
				},
				success : function (data) {
					$('.scrm-loadding').hide();
					if(data.status == 'S'){
						for(var i=0; i< data.data.length; i++){
							_html += '<option value="' + data.data[i].project_id + '">' + data.data[i].project_name +'</option>';
						}
						$('#project_child_id').html(_html);
						$('#child_project').show();
					}else{
						$('#child_project').hide();
					}
				},
				error : function () {
					$.alert('error','网络错误，请重试');
				}
			});

		});

		//点击更改地址或者添加地址将内容保存在sessionStorage
		$(document).on('click','.btn-change',function () {
			var img_url = $('#picture_path').val();
			var content = $('#content').val();
			var community_type = $('#community_type').val();
			var project_id = $('#project_id').val();
			var project_name = $('#project_id').find('option:selected').text();
			var project_child_id = $('#project_child_id').val();
			var project_child_name = $('#project_child_id').find('option:selected').text();

			//设置
			var localObj = window.sessionStorage;
			localObj.setItem('img_url',img_url);
			localObj.setItem('content',content);
			localObj.setItem('community_type',community_type);
			localObj.setItem('project_id',project_id);
			localObj.setItem('project_name',project_name);
			localObj.setItem('project_child_id',project_child_id);
			localObj.setItem('project_child_name',project_child_name);
		});

		function getSessionStorage(){
			var localObj = window.sessionStorage;
			var img_url = localObj.getItem('img_url');
			var content = localObj.getItem('content');
			var community_type = localObj.getItem('community_type');
			var project_id = localObj.getItem('project_id');
			var project_name = localObj.getItem('project_name');
			var project_child_id = localObj.getItem('project_child_id');
			var project_child_name = localObj.getItem('project_child_name');
			if(img_url){
                $('#picture_path').val(img_url);
                $('#picture').attr('src',img_url);
			}//alert($('#picture').attr('src'));
			if(content){
				$('#content').val(content);
			}
			if(community_type){
				$('#community_type').val(community_type);
			}

			if(project_id != 0 && project_name){
				var _html = '<option value="'+project_id+'">' + project_name + '</option>';
				$('#project_id').html(_html);
			}

			if(project_child_id != 0 && project_child_name){
				$('#child_project').show();
				var _html = '<option value="'+project_child_id+'">' + project_child_name + '</option>';
				$('#project_child_id').html(_html);
			}
		}

		//清除所有sessionStorage
		function delSessionStorage() {
			var localObj = window.sessionStorage;
			localObj.clear();
		}

		//提交 创建订单
		$(document).on('click','.addorder',function () {
			var img_url = $('#picture_path').val();
			var content = $('#content').val();
			var community_type = $('#community_type').val();
			var project_id = $('#project_id').val();
			var project_child_id = $('#project_child_id').val();
			var address_id = $('#address').attr('data-address_id');
			var community_name = $.trim($('#community_name').text());
			var community_id = $('#community_name').data('community_id');
			var building_name = $.trim($('#building_name').text());
			var building_id = $('#building_name').data('building_id');
			var room_name = $.trim($('#room_name').text());
			var detail_address = $.trim($('#address_detail').text());
			var real_name = $.trim($('#real_name').text());
			var mobile = $.trim($('#mobile').text());

			if(!img_url){
				$.alert('error','请上传报修图片');
				return false;
			}

			if(!content){
				$.alert('error','请填写报修内容');
				return false;
			}

			if(community_type == 0){
				$.alert('error','请选择园区');
				return false;
			}

			if(!project_id  || project_id == 0){
				$.alert('error','请选择报修项目');
				return false;
			}

			if(!community_name || !building_name){
				$.alert('error','请填写报修地址');
				return false;
			}

			var data = {
				'url' :img_url,
				'content' : content,
				'community_type' : community_type,
				'project_id' : project_id,
				'project_child_id' : project_child_id,
				'address_id' : address_id,
				'community_name' : community_name,
				'community_id' : community_id,
				'building_name' : building_name,
				'building_id' : building_id,
				'room_name' : room_name,
				'real_name' : real_name,
				'mobile' : mobile
			};
			if(detail_address != ''){
				data.detail_address = detail_address;
			}
			$.ajax({
				url : '/Repairnew/RepairnewUserOrder/ajaxSubmitOrder/repairId/{BEESCRM:$repairId}',
				type : 'POST',
				data : data,
				dataType : 'JSON',
				beforeSend : function () {
					$('.scrm-loadding').show();
				},
				success : function (res) {
					//清楚sessionStorage
					delSessionStorage();
					$('.scrm-loadding').hide();
					if(res.status == 'S'){


						$.alert('success','下单成功，请耐心等待~');

						var url = '/Repairnew/RepairnewUserOrder/userOrderDetail/repairId/{BEESCRM:$repairId}/order_id/' + res.data.order_id;
						setTimeout("location.href = '" + url+ "'",2000);
					}else{
						$.alert('error',res.message);
					}
				},
				error : function () {
					$.alert('error','网络错误，请重试');
				}
			})
		});

		$(document).on("click",".js_cancel",function () {
			delSessionStorage();
		})
	});
</script>
</body>
</html>
